<template>
  <div class="vm-require-container">
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-requireDetails-container" ref="require">
      <div class="content">
      <div class="vm-header-prompt">
        <h6>请去网站参与招标报价</h6>
      </div>
      <ul class="vm-notice-warp">
        <li>
          <h6>招标编号</h6>
          <p>{{ requireDetails.cProductCode }}</p>
        </li>
        <li>
          <h6>公告主体</h6>
          <p>{{ requireDetails.cIBidsTatle }}</p>
        </li>
        <li>
          <h6>责任人</h6>
          <p>{{ requireDetails.cRealName }}</p>
        </li>
        <li>
          <h6>公告期</h6>
          <p>{{ requireDetails.iAnnDay }}天</p>
        </li>
        <li>
          <h6>开标时间</h6>
          <p>{{ requireDetails.dOpenTime }}</p>
        </li>
        <li>
          <h6>采购方式</h6>
          <p v-if="requireDetails.cPOType == 1">询比价</p>
          <p v-else-if="requireDetails.cPOType == 2">竞争性谈判</p>
          <p v-else-if="requireDetails.cPOType == 3">单一来源</p>
          <p v-else-if="requireDetails.cPOType == 4">框架协议</p>
          <p v-else-if="requireDetails.cPOType == 5">竞价采购</p>
          <p v-else-if="requireDetails.cPOType == 6">应急采购</p>
          <p v-else-if="requireDetails.cPOType == 0">招投标</p>
        </li>
        <li class="vm-material" v-for="(item, key) in requireDetails.matrial" :key="key">
          <h6>采购物资</h6>
          <div class="vm-material-warp">
            <h5>{{ item.cInventoryName }}</h5>
            <div class="vm-item-material">
              <div class="vm-item-l">
                <img src="../../../static/images/box.png" alt="">
              </div>
              <div class="vm-item-r">
                <p>
                  <span>物料编码：</span>
                  <em>{{ item.cInventoryCode }}</em>
                </p>
                <p>
                  <span>规格</span>
                  <em>{{ item.cInvStd }}</em>
                </p>
                <p>
                  <span>数量</span>
                  <em>{{ item.iNumber }}</em>
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
      </div>
    </div>
  </div>
</template>

<script>
import vmCommonHeader from '@/components/vm-common-header.vue'
import { getNoticedetailData } from '@/api/require.js'
export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        requireId: this.$route.params.id,
        requireDetails: new Object()
      }
    },
    components: {
      'vm-common-header': vmCommonHeader
    },
    methods: {
      getdetailData () {
        getNoticedetailData(this.requireId).then(res => {
          this.requireDetails = res.data.data;
        })
      }
    },
    created () {
      this.getdetailData();
    },
    mounted () {}
}
</script>

<style scoped lang="scss">
.vm-require-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.vm-requireDetails-container {
  height: 100%;
  overflow: scroll;
  .vm-header-prompt {
    background-color: #ffbd1a;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    h6 {
      font-size: 26px;
      color: #7a4811;
    }
  }
  .vm-notice-warp {
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      background-color: #fff;
      li {
        margin-left: 40px;
        display: flex;
        min-height: 80px;
        align-items: center;
        border-bottom: 1px solid #eeeeee; /* no */
        text-align: left;
        h6 {
          width: 185px;
          color: #989898;
          font-size: 26px;
        }
        p {
          flex: 1;
          font-size: 26px;
          color: #000000;
        }
        &.vm-material {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          border-bottom: 1px solid #eeeeee; /* no */
          h6 {
            margin-top: 30px;
          }
          .vm-material-warp {
            margin-bottom: 30px;
            width: 100%;
            h5 {
              height: 100px;
              font-size: 28px;
              color: #000000;
              font-weight: bold;
              align-items: center;
              display: flex;
            }
            .vm-item-material {
              display: flex;
              .vm-item-l {
                margin-right: 30px;
                img {
                  max-width: 120px;
                  max-height: 120px;
                }
              }
              .vm-item-r {
                padding: 8px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }
            }
          }
        }
      }
  }
}
</style>
